{% extends "youpu_base.html" %}
{% block title %}首页 - {{ block.super }}{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/hotlist.css' %}">
{% endblock css %}

{% block full-content %}
    <div class="content">
        <div class="list">
            <div style="margin: 15px; font-size: 20px; font-weight: bold;">热门文章</div>
            <div style="width: 95%;height: 2px;"></div>
            {% for hot_article in hotlist_article %}
                <div class="list-item">
                    <div class="item-logo" style="text-align: center"><span
                            style="font-size: 1.5em;">{{ hot_article.rank }}</span></div>
                    <div class="item-content">
                        <div class="item-title">
                            {% ifequal hot_article.title "暂无数据，等待占位" %}
                                {# 若榜单上的是占位数据，则设置超链接无跳转 #}
                                <a href="#"
                                   class="item-title-link">{{ hot_article.hot_object.title }}</a>
                            {% else %}
                                <a href="{% url 'youpu:articles_article' hot_article.hot_object.slug %}"
                                   class="item-title-link">{{ hot_article.hot_object.title }}</a>
                            {% endifequal %}
                        </div>
                        <div class="item-info">{{ hot_article.hot_object.count_likers }} 点赞</div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="middle" style="text-align: center">
            <div class="middle-title"><img
                    src="{% static "img/hotlist_wordcloud_title.png" %}"></div>
            <div style="width: 95%;height: 4px;"></div>
            <div class="middle-title" style="text-align: center;border-top: 3em"><img width="800px"
                    src="{{ wordcloud_object.wordcloud_data }}"></div>
        </div>
        <div class="list">
            <div style="margin: 15px; font-size: 20px; font-weight: bold;">热议问题</div>
            <div style="width: 95%;height: 2px;"></div>
            {% for hot_question in hotlist_question %}
                <div class="list-item">
                    <div class="item-logo" style="text-align: center"><span
                            style="font-size: 1.5em;">{{ hot_question.rank }}</span></div>
                    <div class="item-content">
                        <div class="item-title">
                            {% ifequal hot_question.title "暂无数据，等待占位" %}
                                {# 若榜单上的是占位数据，则设置超链接无跳转 #}
                                <a href="#"
                                   class="item-title-link">{{ hot_question.hot_object.title }}</a>
                            {% else %}
                                <a href="{% url 'youpu:qa_question_detail' hot_question.hot_object.id %}"
                                   class="item-title-link">{{ hot_question.hot_object.title }}</a>
                            {% endifequal %}
                        </div>
                        <div class="item-info">{{ hot_question.hot_object.total_votes }} 得票
                            · {{ hot_question.hot_object.count_answers }} 回答
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock full-content %}